<template>
  <div id="BacIntelligentExpertRule">
    <Breadcrumb content="微生物智能专家规则库" />
    <div class="bodyContent">
      <!-- vxe-toolbar -->
      <vxe-toolbar perfect>
        <template #buttons>
          <vxe-input v-model="form.keyvalue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keydown="keyEnter" @search-click="findList" @clear="findList"></vxe-input>
          <vxe-button style="margin-left:10px;" type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="findList"></vxe-button>
          <div style="margin-left:65%;">
            <vxe-button style="margin-left:10px;" type="text" class="button-blue" icon="vxe-icon-add" content="新增" @click="addBacRule"></vxe-button>
            <vxe-button style="margin-left:10px;" type="text" class="button-red" icon="vxe-icon-delete" content="删除" @click="deleteBacRule"></vxe-button>
            <vxe-button style="margin-left:10px;" type="text" class="button-blue" icon="vxe-icon-save" content="保存" @click="saveForm"></vxe-button>
            <vxe-button style="margin-left:10px;" type="text" class="button-blue" icon="vxe-icon-edit" content="修改" @click="editBacRule"></vxe-button>
          </div>
        </template>
      </vxe-toolbar>
      <Splitpanes class="area">
        <Pane size="60">
          <div class="tableBox">
            <vxe-table ref="tableRef" border="inner" align="left" class="mytable-scrollbar" :loading="showLoading" height="auto" :data="tableData" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, enabled: false }" @cell-click="tableCellClick" @menu-click="contextMenuClickEvent" show-overflow keep-source>
              <vxe-column type="checkbox" width="26"></vxe-column>
              <vxe-column field="seq" title="序号" width="50">
              </vxe-column>
              <vxe-column field="ruleCode" title="规则代码" width="150">
              </vxe-column>
              <vxe-column field="ruleType" title="规则类型" width="150">
                <template #default="{ row }">
                  {{getRuleTypeName(row)}}
                </template>
              </vxe-column>
              <vxe-column field="ruleName" title="规则名称" width="150"></vxe-column>
              <vxe-column field="effect" title="有效" width="80">
                <template #default="{ row }">
                  <vxe-checkbox v-model="row.effect" size="medium"></vxe-checkbox>
                </template>
              </vxe-column>
              <vxe-column field="des" title="说明(双击开窗查看)" :edit-render="{ autofocus: '.vxe-input--inner' }"></vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane size="40">
          <BacIntelligentExpertRuleForm ref="BacIntelligentExpertRuleFormRef" @findList="findList" />
        </Pane>
      </Splitpanes>

      <vxe-modal v-model="ruleDialog" title="新增" :mask="false" width="40vw" height="30vh" :destroy-on-close="true" show-zoom resize>
        <template #title>
          <span>新增规则</span>
        </template>
        <template #default>
          <vxe-form title-width="90" :data="dataForm" ref="formRef" title-align="right" span="12">
            <vxe-form-item title="规则代码" field="ruleCode">
              <template #default="{ data }">
                <vxe-input v-model="data.ruleCode"></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="规则类别" field="ruleType">
              <template #default="{ data }">
                <vxe-select v-model="data.ruleType" transfer>
                  <vxe-option v-for="item in ruleTypeOptions" :key="item.value" :value="item.value" :label="item.name"></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>
            <vxe-form-item title="规则名称" field="ruleName" span="6">
              <template #default="{ data }">
                <vxe-input v-model="data.ruleName"></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="规则序号" field="seq" span="6">
              <template #default="{ data }">
                <vxe-input type="number" v-model="data.seq"></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="有效" field="effect" span="6">
              <template #default="{ data }">
                <vxe-checkbox v-model="data.effect" size="medium"></vxe-checkbox>
              </template>
            </vxe-form-item>
            <vxe-form-item title="规则说明" field="des" span="24">
              <template #default="{ data }">
                <vxe-textarea v-model="data.des" :maxlength="2000" :autosize="{ minRows: 4, maxRows: 10 }" showWordCount></vxe-textarea>
              </template>
            </vxe-form-item>
            <vxe-form-item align="right" span="24">
              <vxe-button status="primary" @click="saveBacRule">确定</vxe-button>
            </vxe-form-item>
          </vxe-form>
        </template>
      </vxe-modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========src\views\lab_sys\bac_set\bacCultureMedium.vue
import Breadcrumb from '../../../components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../../utils/CommonMessage';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import BacIntelligentExpertRuleForm from './BacIntelligentExpertRuleForm.vue'; //基本信息表单组件
import LogInfo from '@/components/LogInfo.vue'; //日志

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 左侧表格:
let showLoading = ref(false); //刷新+表格加载
const form = reactive({ keyvalue: '' }); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
// 右侧表单:
const BacIntelligentExpertRuleFormRef = ref(null); //基本信息表单标记ref
let currentRow: any = reactive({ id: '', code: '' }); //基本信息表单当前行数据

let ruleDialog = ref(false);
let formRef: any = ref(null); //弹框新增
let formData: any = reactive({});
let dataForm = reactive({});
let ruleTypeOptions = [
  {
    name: '',
    value: ''
  },
  {
    name: '专家规则',
    value: '1'
  },
  {
    name: '审核规则',
    value: '2'
  },
  {
    name: '危急值',
    value: '3'
  },
  {
    name: '传染病',
    value: '4'
  },
  {
    name: '生物危害',
    value: '5'
  }
];

// 方法定义区 =============
onMounted(() => {
  findList(null); // 获取培养基数据
});

function keyEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findList(null);
  }
}

// 获取培养基
const findList = (currentRow) => {
  showLoading.value = true;
  tableData.length = 0; //放入数据前清空数据
  const url = '/bac/rule/findBacRuleList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { searchValue: form.keyvalue } })
    .then(async (res: any) => {
      if (res.data && res.data.length > 0) {
        tableData.push(...res.data);
        const $xTable = proxy.$refs['tableRef'] as any;
        if (currentRow) {
          const datas = res.data.filter((p) => p.id == currentRow.id);
          tableCellClick({ row: datas[0] });
          $xTable.setCurrentRow(datas[0]);
        } else {
          tableCellClick({ row: res.data[0] });
          $xTable.setCurrentRow(res.data[0]);
        }
      }
      showLoading.value = false;
    })
    .catch((err: any) => {
      showLoading.value = false;
      VxeMessage('获取规则数据异常', VxeNotifyType.error);
    });
};

function getRuleTypeName(row) {
  const data: any = ruleTypeOptions.filter((p) => p.value == row.ruleType);
  if (data && data.length > 0) {
    return data[0].name;
  }
  return '';
}

function saveForm() {
  BacIntelligentExpertRuleFormRef.value?.saveAllBacRule();
}

// 新增培养基
function addBacRule() {
  ruleDialog.value = true;
}

function editBacRule() {
  const data = tableRef.value?.getCurrentRecord();
  Object.assign(dataForm, data);
  ruleDialog.value = true;
}

function saveBacRule() {
  let url = '';
  if (dataForm.id) {
    url = '/bac/rule/updateBacRule';
  } else {
    url = '/bac/rule/addBacRule';
  }
  proxy.$http
    .post(url, dataForm)
    .then((res: any) => {
      resetForm();
      ruleDialog.value = false;
      VxeMessage(res.status.msg, VxeNotifyType.success);
      findList(res.data);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

function resetForm() {
  dataForm = reactive({});
}

// 删除
function deleteBacRule() {
  const arr = tableRef.value?.getCheckboxRecords(true);
  if (!(arr && arr.length > 0 && arr[0])) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const url = '/bac/rule/deleteBacRule';
        proxy.$http
          .post(
            url,
            arr.map((p) => p.ruleCode)
          )
          .then((res: any) => {
            VxeMessage(res.status.msg, VxeNotifyType.success);
            findList(null);
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  }
}

// 表格选中当前行
function tableCellClick({ row }: any) {
  BacIntelligentExpertRuleFormRef.value?.getRowList(row);
}
/**右键菜单 */
function contextMenuClickEvent() {
  //todo
}
</script>
<style lang="scss" scoped>
#BacIntelligentExpertRule {
  width: 100%;
  height: 100%;

  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 80px);

    .area {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .tableBox {
        height: calc(100% - 40px);
      }

      .el-tabs {
        height: 100%;

        :deep(.el-tabs__content) {
          padding: 0;
          height: calc(100% - 39px);

          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
